<template>  
    <view 
	@touchStart="touchStart"
	 @touchEnd="touchEnd" 
	 class="touch-body">  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                touchStartX: 0,  // 触屏起始点x  
                touchStartY: 0,  // 触屏起始点y  
            };  
        },  
        methods: {  
            /**  
            * 触摸开始  
            **/  
            touchStart(e) {  
                console.log("触摸开始")  
                this.touchStartX = e.touches[0].clientX;  
                this.touchStartY = e.touches[0].clientY;  
            },  
 
            /**  
            * 触摸结束  
            **/  
            touchEnd(e) {  
				let that = this
                console.log("触摸结束")  
                let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
                let deltaY = e.changedTouches[0].clientY - this.touchStartY;  
                if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  
                    if (deltaX >= 0) {  
                        console.log("左滑")  
						// this.$emit("touchResult","left")
						that.$emit('touchResult',"left")
                    } else {  
                        console.log("右滑")  
						that.$emit('touchResult',"right")
                    }  
                } else if(Math.abs(deltaY) > 50&& Math.abs(deltaX) < Math.abs(deltaY)) {  
                    if (deltaY < 0) {  
                        console.log("上滑")  
                    } else {  
                        console.log("下滑")  
                    }  
                } else {  
                    console.log("可能是误触！")  
                }  
            },            
        }  
    };  
</script>
<style lang="scss" scoped>
	.touch-body{
		/* background-color: transparent; */
					overflow: hidden;
					z-index: -1;//防止被遮挡调到最大值
					position: fixed;
					width: 100%;
					height: 100%;
					/* border:1px solid red; */
					right:0px;//距离左边距离右边同理
					top: 145rpx;//距离顶部距离
					bottom: 150rpx;
					text-align: center;
	
	}
</style>